<template>
  <div class="page-member-manage-list mod-user">
    <div class="search-bar">
      <!-- native modifier has been removed, please confirm whether the function has been affected  -->
      <el-form
        ref="searchFormRef"
        :inline="true"
        class="search-form"
        :model="searchForm"
        @submit.prevent
      >
        <div class="input-row">
          <el-form-item
            prop="nickName"
            :label="$t('users.name') + ':'"
          >
            <el-input
              v-model="searchForm.nickName"
              type="text"
              clearable
              :placeholder="$t('users.name')"
            />
          </el-form-item>
          <el-form-item
            prop="userMobile"
            :label="$t('publics.mobilePhone') + ':'"
          >
            <el-input
              v-model="searchForm.userMobile"
              type="text"
              clearable
              maxlength="11"
              :placeholder="$t('publics.mobilePhone')"
            />
          </el-form-item>

          <el-form-item
            prop="userMail"
            label="邮箱:"
          >
            <el-input
              v-model="searchForm.userMail"
              type="text"
              clearable
              placeholder="邮箱"
            />
          </el-form-item>

          <!-- <el-form-item
            v-if="isAuth('user:userLevel:list')"
            prop="levelType"
            :label="$t('user.memberType') + ':'"
          >
            <el-cascader
              ref="memberCascaderRef"
              v-model="memberLevelVal"
              :options="levelTypes"
              :props="{ checkStrictly: true }"
              clearable
              @change="handleMemberTypeChange"
            />
          </el-form-item> -->

          <el-form-item
            prop="memberType"
            :label="$t('user.memberType') + ':'"
          >
            <el-select
              v-model="searchForm.memberType"
              clearable
            >
              <el-option
                v-for="item in memberTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item
            prop="status"
            :label="$t('publics.status') + ':'"
          >
            <el-select
              v-model="searchForm.status"
              clearable
              :placeholder="$t('publics.status')"
            >
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <p />
          <el-form-item :label="$t('user.registrationTime')+':'">
            <el-date-picker
              v-model="createDateRange"
              :default-time="[new Date(2000, 1, 1, 0, 0, 0),
                              new Date(2000, 2, 1, 23, 59, 59)]"
              type="datetimerange"
              clearable
              :range-separator="$t('date.tip')"
              value-format="YYYY-MM-DD HH:mm:ss"
              :start-placeholder="$t('text.startTime')"
              :end-placeholder="$t('date.end')"
              @change="createTimeChange"
            />
          </el-form-item>
          <el-form-item
            :label="$t('user.userTag')+':'"
            prop="userTag"
          >
            <el-select
              v-model="searchForm.userTag"
              v-el-select-loadmore="loadmore"
              value-key="userTagId"
              multiple
              clearable
              collapse-tags
              :placeholder="$t('user.userTagDefaultTxt')"
            >
              <el-option
                v-for="item in tagList"
                :key="item.userTagId"
                :label="item.tagName"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            prop="inviter"
            :label="$t('distributionMsg.invitees') + ':'"
          >
            <el-input
              v-model="searchForm.inviter"
              type="text"
              clearable
              :placeholder="$t('users.parentPhoneNumber') "
            />
          </el-form-item>
          <el-form-item>
            <div
              class="default-btn primary-btn"
              @click="onSearch(true)"
            >
              {{ $t('crud.searchBtn') }}
            </div>
            <div
              class="default-btn"
              @click="resetForm()"
            >
              {{ $t('product.reset') }}
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="main-container">
      <div class="operation-bar">
        <div
          v-if="isAuth('user:userLevel:updateGrowth')"
          class="primary-btn default-btn"
          :class="{'disabled-btn': dataListSelections.length <= 0}"
          @click="updateGrowth()"
        >
          {{ $t('user.updateGrowth') }}
        </div>
        <div
          class="primary-btn default-btn"
          :class="{'disabled-btn': dataListSelections.length <= 0}"
          @click="updateTags()"
        >
          {{ $t('user.tagging') }}
        </div>
        <div
          v-if="isAuth('user:userLevel:updateScore')"
          class="primary-btn default-btn"
          :class="{'disabled-btn': dataListSelections.length <= 0}"
          @click="updateScore()"
        >
          {{ $t('user.updateScore') }}
        </div>
        <div
          v-if="isAuth('platform:coupon:sendUserCoupon')"
          class="primary-btn default-btn"
          :class="{'disabled-btn': dataListSelections.length <= 0}"
          @click="updateCoupon()"
        >
          {{ $t('user.sendCoupons') }}
        </div>
        <div
          v-if="isAuth('platform:user:updateBalance') && paySettlementType!==1"
          class="primary-btn default-btn"
          :class="{'disabled-btn': dataListSelections.length <= 0}"
          @click="updateBalance(null,1)"
        >
          {{ $t('user.modifyBalance') }}
        </div>
        <div
          v-if="isAuth('platform:user:import')"
          class="primary-btn default-btn"
          :disabled="importDisabled"
          @click="importUser()"
        >
          {{ $t('user.userImport') }}
        </div>
        <div
          class="primary-btn default-btn"
          :disabled="exportDisabled"
          @click="exportUser()"
        >
          {{ $t('user.export') }}
        </div>
      </div>
      <div class="table-con">
        <div
          v-if="dataList.length === 0"
          class="empty-text"
        >
          {{ $t('user.noData') }}
        </div>
        <el-table
          :data="dataList"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
          style="width: 100%"
          @selection-change="selectionChange"
        >
          <el-table-column
            fixed
            type="selection"
            width="60"
          />
          <el-table-column
            fixed
            :label="$t('users.name')"
            prop="nickName"
            align="left"
            width="120"
          />
          <el-table-column
            fixed
            prop="pic"
            :label="$t('publics.profilePicture')"
          >
            <template #default="scope">
              <div class="table-cell-image">
                <img
                  v-if="!scope.row.pic"
                  src="~@/assets/img/userImg.jpg"
                  width="130px"
                >
                <img
                  v-else
                  :src="checkFileUrl(scope.row.pic)"
                  @error="scope.row.pic=''"
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="userMobile"
            width="120"
            :label="$t('publics.mobilePhone')"
          >
            <template #default="scope">
              <div>{{ isTel(scope.row.userMobile) ? scope.row.userMobile : '--' }}</div>
            </template>
          </el-table-column>

          <!-- <el-table-column
            prop="unionId"
            width="150"
            label="微信号"
            show-overflow-tooltip
          >
            <template #default="scope">
              <div>{{ scope.row.unionId || '--' }}</div>
            </template>
          </el-table-column> -->

          <el-table-column
            width="120"
            label="真实姓名"
            show-overflow-tooltip
          >
            <template #default="scope">
              {{ scope.row.realName || '--' }}
            </template>
          </el-table-column>

          <el-table-column
            width="120"
            label="身份"
          >
            <template #default="scope">
              {{ scope.row.identity || '--' }}
            </template>
          </el-table-column>

          <el-table-column
            width="120"
            label="公司"
            show-overflow-tooltip
          >
            <template #default="scope">
              {{ scope.row.company || '--' }}
            </template>
          </el-table-column>

          <el-table-column
            width="120"
            label="职位"
            show-overflow-tooltip
          >
            <template #default="scope">
              {{ scope.row.position || '--' }}
            </template>
          </el-table-column>

          <el-table-column
            width="150"
            label="邮箱"
            show-overflow-tooltip
          >
            <template #default="scope">
              {{ scope.row.userMail || '--' }}
            </template>
          </el-table-column>

          <el-table-column
            width="120"
            label="工作证照"
            show-overflow-tooltip
          >
            <template #default="scope">
              <el-image
                v-if="scope.row.workPermit"
                class="table-cell-image"
                preview-teleported
                :src="checkFileUrl(scope.row.workPermit)"
                :preview-src-list="[checkFileUrl(scope.row.workPermit)]"
              />
              <span v-else>--</span>
            </template>
          </el-table-column>

          <!-- <el-table-column
            prop="levelName"
            width="120"
            :label="$t('user.membershipLevel')"
          /> -->

          <el-table-column
            prop="memberType"
            width="120"
            :label="$t('user.memberType')"
          >
            <template #default="scope">
              <span>{{ memberTypeList.find(d => d.value == scope.row.memberType)?.label || '--' }}</span>
            </template>
          </el-table-column>

          <!-- <el-table-column
            prop="growth"
            width="120"
            :label="$t('user.growth')"
          /> -->

          <el-table-column
            prop="score"
            width="120"
            :label="$t('user.userScore')"
          />
          <el-table-column
            prop="sumScore"
            width="120"
            :label="$t('user.cumulativeScore')"
          />
          <el-table-column
            prop="status"
            width="120"
            :label="$t('publics.status')"
          >
            <template #default="scope">
              <span>{{ [$t('publics.disable'),$t('publics.normal')][scope.row.status] }}</span>
            </template>
          </el-table-column>
          <el-table-column
            width="150"
            prop="userRegtime"
            :label="$t('user.registrationTime')"
          >
            <template #default="scope">
              <div>{{ scope.row.userRegtime || '-' }}</div>
            </template>
          </el-table-column>
          <!-- 邀请人 -->
          <el-table-column
            width="100"
            prop="inviterName"
            :label="$t('distributionMsg.invitees')"
          >
            <template #default="scope">
              <span>{{ scope.row.inviterName || '-' }}</span>
            </template>
          </el-table-column>

          <el-table-column
            width="120"
            prop="inviterMobile"
            :label="$t('users.parentPhoneNumber')"
          >
            <template #default="scope">
              <span>{{ scope.row.inviterMobile || '-' }}</span>
            </template>
          </el-table-column>

          <!-- 隐藏消费相关 -->
          <!-- <el-table-column
            width="150"
            prop="reConsTime"
            :label="$t('user.lastConsumptionTime')"
          >
            <template #default="scope">
              <div>{{ scope.row.reConsTime || '-' }}</div>
            </template>
          </el-table-column>
          <el-table-column
            width="120"
            prop="consAmount"
            :label="$t('user.consumptionAmount')"
          >
            <template #default="scope">
              <div>{{ scope.row.consAmount || '-' }}</div>
            </template>
          </el-table-column>
          <el-table-column
            width="120"
            prop="actualAmount"
            :label="$t('user.actuallypaid')"
          >
            <template #default="scope">
              <div>{{ scope.row.actualAmount || '-' }}</div>
            </template>
          </el-table-column>
          <el-table-column
            width="120"
            prop="consTimes"
            :label="$t('user.consumptionTimes')"
          />
          <el-table-column
            width="120"
            prop="averDiscount"
            :label="$t('user.averageDiscount')"
          />
          <el-table-column
            width="120"
            prop="rechargeAmount"
            :label="$t('user.rechargeAmount')"
          />
          <el-table-column
            width="120"
            prop="rechargeTimes"
            :label="$t('user.rechargeTimes')"
          />
          <el-table-column
            width="150"
            prop="afterSaleAmount"
            :label="$t('home.refundAmount')"
          />
          <el-table-column
            width="120"
            prop="afterSaleTimes"
            :label="$t('user.refundTimes')"
          />
          <el-table-column
            width="120"
            prop="currentBalance"
            :label="$t('user.currentBalance')"
          />
          <el-table-column
            width="120"
            prop="sumBalance"
            :label="$t('user.cumulativeBalances')"
          /> -->
          <!-- 隐藏消费相关 -->

          <el-table-column
            fixed="right"
            align="center"
            :label="$t('crud.menu')"
            width="230"
          >
            <template #default="scope">
              <div class="text-btn-con">
                <div
                  v-if="isAuth('plateform:user:update')"
                  class="text-btn default-btn"
                  @click.stop="onAddOrUpdate(scope.row.userId)"
                >
                  {{ $t('coupon.edit') }}
                </div>
                <div
                  v-if="isAuth('platform:user:updateBalance') && paySettlementType!==1"
                  class="default-btn text-btn"
                  @click.stop="updateBalance(scope.row.userId, 0, scope.row.currentBalance)"
                >
                  {{ $t('user.modifyBalance') }}
                </div>
              </div>
            </template>
          </el-table-column>

          <template #empty>
            <div>
              &nbsp;
            </div>
          </template>
        </el-table>
      </div>
      <el-pagination
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="onPageSizeChange"
        @current-change="onPageChange"
      />
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdateRef"
      @refresh-data-list="refreshChange"
    />
    <update-user-growth
      v-if="updateGrowthVisible"
      ref="updateGrowthRef"
      @refresh-data-list="refreshChange"
    />
    <update-user-score
      v-if="updateScoreVisible"
      ref="updateScoreRef"
      @refresh-data-list="refreshChange"
    />
    <update-user-tags
      v-if="updateTagsVisible"
      ref="updateTagsRef"
      @refresh-data-list="refreshChange"
    />
    <update-user-balance
      v-if="updateBalanceVisible"
      ref="updateBalanceRef"
      @refresh-data-list="refreshChange"
    />
    <update-user-coupon
      v-if="updateCouponVisible"
      ref="updateCouponRef"
      :get-way="1"
      @refresh-data-list="refreshChange"
    />
    <excel-user-import
      v-if="importUserVisible"
      ref="importUserRef"
      @refresh-data-list="refreshChange"
    />
  </div>
</template>

<script setup>
import { isTel } from '@/utils/validate'
import { ElLoading, ElMessage } from 'element-plus'
import { isAuth } from '@/utils'
import addOrUpdate from './components/user-add-or-update.vue'
import updateUserGrowth from './components/update-user-growth.vue'
import updateUserScore from './components/update-user-score.vue'
import updateUserTags from './components/update-user-tags.vue'
import updateUserBalance from './components/update-user-balance.vue'
import updateUserCoupon from './components/update-user-copon.vue'
import excelUserImport from './components/excel-user-import.vue'

const vElSelectLoadmore = {
  bind (el, binding) {
    // 获取element-ui定义好的scroll盒子
    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
    SELECTWRAP_DOM.addEventListener('scroll', function () {
      /**
          * scrollHeight 获取元素内容高度(只读)
          * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
          * clientHeight 读取元素的可见高度(只读)
          * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
          * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
          */
      const condition = this.scrollHeight - this.scrollTop <= (this.clientHeight + 0.5)
      if (condition) {
        binding.value()
      }
    })
  }
}

const allinpayStore = useAllinpayStore()
const paySettlementType = computed(() => {
  return allinpayStore.paySettlementType
})

let tempSearchForm = null // 保存上次点击查询的请求条件

const dataList = ref([])
const exportDisabled = ref(false)
const importDisabled = ref(false)
const updateBalanceVisible = ref(false)
const updateCouponVisible = ref(false)
const dataListSelections = ref([])
const addOrUpdateVisible = ref(false)
const updateGrowthVisible = ref(false)
const updateScoreVisible = ref(false)
const updateTagsVisible = ref(false)
const importUserVisible = ref(false)
const createDateRange = ref([]) // 注册时间范围
const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})
const searchForm = reactive({
  inviter: '',
  userTag: [],
  nickName: '',
  userMobile: '',
  userMail: '',
  levelType: '',
  // 会员等级
  level: '',
  status: null,
  userRegStartTime: null, // 注册起始时间
  userRegEndTime: null // 注册结束时间
})
const levelTypes = reactive([
  {
    label: $t('user.ordinaryMember'),
    value: 0,
    children: []
  }, {
    label: $t('user.paidMembership'),
    value: 1,
    children: []
  }
])
const memberLevelVal = ref('')
const status = [
  {
    label: $t('publics.disable'),
    value: 0
  }, {
    label: $t('publics.normal'),
    value: 1
  }, {
    label: '限制',
    value: 2
  }
]

const memberTypeList = [
  {
    label: '普通会员',
    value: '0'
  },
  {
    label: '认证会员',
    value: '1'
  },
  {
    label: '推广会员',
    value: '2'
  },
  {
    label: '专业会员',
    value: '3'
  }
]
// 会员标签列表
const tagList = ref([])
let tagTotal = 0
const tagSearchParam = {
  size: 10,
  current: 1
}

onMounted(() => {
  if (isAuth('user:userLevel:list')) {
    getMemberLevelList()
  }
  getDataList(page)
  getMemberTags()
})

/**
 * 切换付费会员等级
 */
const memberCascaderRef = ref(null)
const handleMemberTypeChange = (val) => {
  searchForm.levelType = val[0]
  searchForm.level = val[1] || ''
  memberCascaderRef.value.dropDownVisible = false
}
/**
 * 获取会员等级列表
 */
const getMemberLevelList = () => {
  for (let index = 0; index < 2; index++) {
    http({
      url: http.adornUrl('/user/userLevel/list'),
      method: 'get',
      params: http.adornParams({
        userLevelType: index
      })
    }).then(({ data }) => {
      const children = []
      getVipInternationalization(data)
      data.forEach(el => {
        children.push({
          value: el.level,
          label: el.levelName
        })
      })
      levelTypes[index].children = children
    })
  }
}
// 获取数据列表  /admin/user/page
const getDataList = (pageParam, newData = false) => {
  if (newData || !tempSearchForm) {
    tempSearchForm = JSON.parse(JSON.stringify(searchForm))
  }
  tempSearchForm.userTag = null
  http({
    url: http.adornUrl('/admin/user/userPage'),
    method: 'get',
    params: http.adornParams(
      Object.assign(
        {
          current: pageParam == null ? page.currentPage : pageParam.currentPage,
          size: pageParam == null ? page.pageSize : pageParam.pageSize
        },
        tempSearchForm
      )
    )
  }).then(({ data }) => {
    getVipInternationalization(data.records)
    dataList.value = data.records
    page.total = data.total
  })
}
// 新增 / 修改
const addOrUpdateRef = ref(null)
const onAddOrUpdate = (id) => {
  addOrUpdateVisible.value = true
  nextTick(() => {
    addOrUpdateRef.value?.init(id)
  })
}
// 条件查询 JSON.stringify(arr)
const onSearch = (newData = false) => {
  let arr = ''
  if (searchForm.userTag.length !== 0) {
    searchForm.userTag.forEach(item => {
      arr = arr + item.userTagId + ','
    })
  }
  searchForm.tagIds = arr
  page.currentPage = 1
  getDataList(page, newData)
}
// 刷新回调用
const refreshChange = () => {
  getDataList(page)
}
const onPageSizeChange = (val) => {
  page.pageSize = val
  getDataList(page)
}
const onPageChange = (val) => {
  page.currentPage = val
  getDataList(page)
}
const searchFormRef = ref(null)
const resetForm = () => {
  searchFormRef.value.resetFields()
  searchForm.level = ''
  searchForm.userTag = []
  searchForm.userRegStartTime = null
  searchForm.userRegEndTime = null
  memberLevelVal.value = null
  createDateRange.value = []
}
const createTimeChange = () => {
  if (!createDateRange.value || createDateRange.value.length === 0) {
    searchForm.userRegStartTime = null
    searchForm.userRegEndTime = null
  } else {
    searchForm.userRegStartTime = createDateRange.value[0]
    searchForm.userRegEndTime = createDateRange.value[1]
  }
}
// 多选变化
const selectionChange = (val) => {
  dataListSelections.value = val
}
const updateGrowthRef = ref(null)
// 修改成长值
const updateGrowth = (id) => {
  if (dataListSelections.value.length <= 0) {
    return
  }
  const ids = id ? [id] : dataListSelections.value.map(item => {
    return item.userId
  })
  // console.log(ids)
  updateGrowthVisible.value = true
  nextTick(() => {
    updateGrowthRef.value?.init(ids)
  })
}
const updateScoreRef = ref(null)
// 修改成长值
const updateScore = (id) => {
  if (dataListSelections.value.length <= 0) {
    return
  }
  const ids = id ? [id] : dataListSelections.value.map(item => {
    return item.userId
  })
  // console.log(ids)
  updateScoreVisible.value = true
  nextTick(() => {
    updateScoreRef.value?.init(ids)
  })
}

const updateTagsRef = ref(null)
const updateTags = (id) => {
  if (dataListSelections.value.length <= 0) {
    return
  }
  const ids = id ? [id] : dataListSelections.value.map(item => {
    return item.userId
  })
  // console.log(ids)
  updateTagsVisible.value = true
  nextTick(() => {
    updateTagsRef.value?.init(ids)
  })
}

const updateBalanceRef = ref(null)
// type 1 批次充值 0修改余额
const updateBalance = (id, type, balance) => {
  if (dataListSelections.value.length <= 0 && type) {
    return
  }
  const ids = id ? [id] : dataListSelections.value.map(item => {
    return item.userId
  })
  // console.log(ids)
  updateBalanceVisible.value = true
  nextTick(() => {
    updateBalanceRef.value?.init(ids, type, balance)
  })
}

const updateCouponRef = ref(null)
const updateCoupon = (id) => {
  if (dataListSelections.value.length <= 0) {
    return
  }
  const ids = id ? [id] : dataListSelections.value.map(item => {
    return item.userId
  })
  // console.log(ids)
  updateCouponVisible.value = true
  nextTick(() => {
    updateCouponRef.value?.init(ids)
  })
}

/**
 * 导入用户
 */
const importUserRef = ref(null)
const importUser = () => {
  importUserVisible.value = true
  nextTick(() => {
    importUserRef.value?.init()
  })
}
/**
 * 导出单品
 */
const $loading = ElLoading.service
const exportUser = () => {
  exportDisabled.value = true
  const loading = $loading({
    lock: true,
    target: '.table-con',
    customClass: 'export-load',
    background: 'transparent',
    text: $t('shop.exportIng')
  })
  http({
    url: http.adornUrl('/admin/user/exportUser'),
    method: 'get',
    params: http.adornParams(searchForm),
    responseType: 'blob' // 解决文件下载乱码问题
  }).then(async ({ data }) => {
    loading.close()
    exportDisabled.value = false
    const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
    // 读取文件内容
    try {
      const TEXT = await (new Response(blob)).text()
      const result = JSON.parse(TEXT)
      if (result.code === 'A00004') {
        ElMessage({
          message: result.msg || $t('loginExpired'),
          type: 'error',
          duration: 1500,
          onClose: () => {
            nextTick(() => {
              clearLoginInfo()
              useRouter().replace({ name: 'login' })
            })
          }
        })
        return
      }
    } catch (error) {
    }
    const fileName = $t('user.userInformationForm')
    const elink = document.createElement('a')
    if ('download' in elink) { // 非IE下载
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href) // 释放URL 对象
      document.body.removeChild(elink)
    } else { // IE10+下载
      navigator.msSaveBlob(blob, fileName)
    }
  }).catch((e) => {
    loading.close()
  })
}
// 国际化
const getVipInternationalization = (data) => {
  if (!data) return
  const lang = localStorage.getItem('bbcLang') || 'zh_CN'
  data.map(element => {
    let levelNameCn, levelNameEn
    if (!element.userLevelLangList) return element
    element.userLevelLangList.map(val => {
      if (val.lang === 0) {
        levelNameCn = val.levelName
      }
      if (val.lang === 1) {
        levelNameEn = val.levelName
      }
      return val
    })
    element.levelName = lang === 'zh_CN' ? levelNameCn : levelNameEn || levelNameCn
    element.levelName = lang === 'zh_CN' ? levelNameCn : levelNameEn || levelNameCn
    return element
  })
}
/**
 * 获取会员标签列表
 */
const getMemberTags = () => {
  http({
    url: http.adornUrl('/user/userTag/byTagType'),
    method: 'get',
    params: http.adornParams(
      tagSearchParam
    )
  }).then(({ data }) => {
    if (!data) return
    tagTotal = data.total
    tagList.value = [...tagList.value, ...data.records]
  })
}
const loadmore = () => {
  tagSearchParam.current++
  if (tagList.value.length < tagTotal) {
    getMemberTags()
  }
}

</script>
<style lang="scss" scoped>
.page-member-manage-list.mod-user {
  :deep(.main-container){
    .el-table__fixed{
      height: auto !important;
      bottom: 16px !important;
      &::before {
        background-color: transparent !important;
      }
    }
    .el-table__fixed-right{
      height: auto !important;
      bottom: 16px !important;
      &::before {
        background-color: transparent !important;
      }
    }
   .export-load {
      top: -50% !important;
    }
    .el-select .el-select__tags > span > .el-tag.el-tag--info:nth-last-child(2) {
      max-width: 120px;
    }
  }

  .table-con {
    position: relative;
  }

  .empty-text {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    color: #909399;
  }

}
</style>
